<template>
    <div>
<!--        {{subject_id}}{{subject_name}}{{activeFree}}{{subject}}-->
        <!--        {{recentVideoList}}-->
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane v-for="item in videoCourseList" :label="item.name" :name="item.id">
                <div style="display: flex;padding: 10px 0px" v-for="item in recentVideoList.rows">
                    <img width="160" height="90" :src="item.coverURL" alt="">
                    <div style="display: flex;justify-content: space-between;width: 100%;margin-left: 20px;border-bottom: 1px solid gray">
                        <div>
                            <p style="flex: 1;font-weight: bold">{{item.name}}</p>
                            <p style="flex: 1;color: rgb(141, 130, 130);font-size: 12px;padding: 5px 0px">总时长{{item.duration ? proxy.$filters.timeFormat(item.duration) : proxy.$filters.timeFormat(0)}}</p>
                        </div>
                        <div style="display: flex;flex-direction:column;justify-content: flex-end;margin-bottom: 20px">
                            <el-button style="text-align: right" @click="continueStudy(item)">查看详情</el-button>
                        </div>
                    </div>
                </div>
                <div v-if="recentVideoList.pagination">
                    <el-pagination
                            background
                            v-model:currentPage="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="recentVideoList.pagination.count"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import {recentVideoList,videoFreeVideoList} from "@/api/api";
    import {reactive, toRefs,ref,watchEffect,getCurrentInstance,watch} from 'vue'
    import {useRouter} from "vue-router";
    import {videoFreeCourse, videoMyCoursesList} from "../../../../api/api";

    export default {
        name: "freeVideo",
        props: {
            subject_id: {
                type: Number
            },
            subject_name: {
                type: String
            },
            activeFree:{
                type:String
            },
            subject:{
                type:Number
            }
        },
        setup(props) {

            let router = useRouter();
            const { proxy } = getCurrentInstance()
            let data = reactive({
                recentVideoList: [],
                pageSize: 10,
                currentPage: 1,
            })

            let getRecentVideoList = () => {
                videoFreeVideoList({subjectID:activeName.value,page:data.currentPage,pageSize:data.pageSize}).then(res => {
                    console.log('免费试听视频列表', res)
                    data.recentVideoList = res.data;
                })
            }

            let activeName = ref('');
            let videoCourseList = ref([]);
            let getVideoMyCoursesList = () =>{
                console.log('当前免费课程',props.activeFree)
                videoMyCoursesList({courseID:props.activeFree}).then(res =>{
                    console.log('免费试听分类列表',res)
                    videoCourseList.value = res.data;
                    activeName.value = props.subject
                    getRecentVideoList()
                })
            }

            watchEffect(() =>{
                let activeFree = props.activeFree;
                if(activeFree){
                    getVideoMyCoursesList();
                }
            })

            const handleSizeChange = (val) => {
                console.log(`${val} items per page`)
                data.pageSize = val;
                getRecentVideoList();
            }
            const handleCurrentChange = (val) => {
                console.log(`current page: ${val}`)
                data.currentPage = val;
                getRecentVideoList();
            }

            let continueStudy = (item) =>{
                console.log(item,activeName.value)
                router.push({name:'FreePlayer',params:{id:item.id,subject_id:activeName.value}})
                // router.push({name:'VideoPlayer',params:{subject_id:localStorage.getItem('activeCourse'),subject_name:localStorage.getItem('activeCourseName'),vid:item.id,activeName:item.name}})
            }

            watch(() => activeName.value,() =>{
                getRecentVideoList();
            })
            return {
                proxy,
                videoCourseList,
                activeName,
                handleSizeChange,
                handleCurrentChange,
                ...toRefs(data),
                continueStudy
            }
        }
    }
</script>

<style scoped>

</style>
